<template>
	<view class="u-padding-left-32 u-padding-right-32" :class="currentTheme">
		<a-nabbar name="参展信息" />
		<view class="u-padding-top-22" >
			<item-box padding="34">
				<view class="u-flex u-padding-top-10 u-padding-bottom-10 u-col-top u-padding-right-30">
					<item-image type="1" size="120" :img="loginForm.avatar"></item-image>
					<view class="u-margin-left-36 u-flex-1">
						<view class="u-flex">
							<view class="u-flex-1 box-title text-bold u-font-36 u-line-1" style="width: 0;">{{loginForm.nickname}}</view>
							<view class="text-color-txtTheme u-font-22 u-margin-left-30" v-if="loginForm.userType">{{loginForm.userType=='issue'?'发行':'门店'}}用户</view>
						</view>
						<view class="u-margin-top-34" v-if="authObj.historyList">
							<item-number-list :list="authObj.historyList" isFirstLeft></item-number-list>
						</view>
					</view>
				</view>
			</item-box>
		</view>
		<view class="u-padding-22 u-text-center text-order-time u-font-26">{{authObj.tips || ''}}</view>
		<itemBox padding="33">
			<label-box :label="`${storeName}名`" labelSize="32" labelWidth="190">
				<!-- <item-input v-model="form.nickname" :placeholder="`请输入${storeName}名`"></item-input> -->
				<u-input v-model="form.nickname" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" :placeholder="`请输入${storeName}名`" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
			</label-box>
			<template v-if="userType!=='issue'">
				<label-box label="性别设置" labelSize="32" labelWidth="190">
					<select-item v-model="form.gender" :list='sexList' ></select-item>
					<view class="u-font-22 text-order-time u-margin-top-10">该性别用于测本对应角色,且一天只允许修改一次性别。</view>
				</label-box>
				<label-box label="所在城市" labelSize="32" labelWidth="190">
					<select-item v-model="form.address" mode="popSelectCity" placeholder="请选择所在城市"  @getSelect="getSelectCity"></select-item>
				</label-box>
				<label-box label="详细地址" labelSize="32" labelWidth="190">
					<u-input v-model="form.detailAddress" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入详细地址" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
				</label-box>
			</template>
			<label-box label="微信号" labelSize="32" labelWidth="190">
				<u-input v-model="form.wxId" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入微信号" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
			</label-box>
			<template v-if="userType!='issue'">
				<label-box label="联系人" labelSize="32" labelWidth="190">
					<u-input v-model="form.contactMan" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入联系人" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
				</label-box>
				<label-box label="联系电话" labelSize="32" labelWidth="190">
					<u-input v-model="form.contactNumber" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入联系电话" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
				</label-box>
				<label-box label="门店数量" labelSize="32" labelWidth="190">
					<u-input v-model="form.storeNumber" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入门店数量" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
				</label-box>
			</template>
			<label-box label="经营年数" labelSize="32" labelWidth="190">
				<select-item :list="yearList" v-model="form.businessYear" placeholder="请选择经营年数"  @getIds="getYearIds"></select-item>
			</label-box>
			<template v-if="userType=='issue'">
				<view  @click="chooseAddress" >
				<label-box label="展会酒店地址" labelSize="32" labelWidth="190">
					<view class="hotel-address u-flex  u-row-between">
					<view class="u-flex-1 u-flex">
						<view style="overflow: hidden;width: 0;" v-if="form.hotelAddress" class="u-line-1 u-flex-1">{{form.hotelAddress}}</view>
						<view class="u-font-30" v-else :style="{color:currentThemeObj.placeholderColor}">
						请选择展会酒店地址<!-- {{loginForm.isExhibit?'':'发车地址'}} -->
						</view>
					</view>
					<view class="icon-view">
						<u-icon size="30" name="map-fill" :color="currentThemeObj.primary"></u-icon>
					</view>
					</view>
				</label-box>
				</view>
				<label-box label="房间号" labelSize="32" labelWidth="190">
					<u-input v-model="form.hotelRoomNo" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" placeholder="请输入详细地址" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
				</label-box>
			</template>
		</itemBox>
		<view class="save-btn"  v-if="loginForm.storeNumber>0&&userType!=='issue'">
			<view class="u-margin-bottom-28">
				<item-btn width="100%" height="88" @click="pushStore" >门店录入</item-btn>
			</view>
			<item-btn width="100%" height="88" @click="setInfo" type="plain">
				<text class="box-title u-font-28">保存设置</text>
			</item-btn>
		</view>
		<view class="save-btn" v-else>
			<view class="u-margin-bottom-28">
				<item-btn width="100%" height="88" @click="setInfo" >保存设置</item-btn>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {userExhibitInfoSetting,getDefaultUserExhibitInfoDto} from '@/api/user.js'
	import selectCityMixins from '@/mixins/selectMixins.js'
	import uploader from '@/components/upload/upload.vue'
	import data from '@/data/index.js'
	import itemNumberList from '@/components/itemNumberList/itemNumberList.vue'
	export default {
		mixins:[selectCityMixins],
		data() {
			return {
				sexList:data.sexList,
				form:{
					hotelAddress:'',
					hotelRoomNo:''
				},
				show:false,
				option:{},
				yearList:[],
				loading:false,
				uploadFlag:true,
				pictureFlag:false
			};
		},
		components: {
			uploader,
			itemNumberList
		},
		computed: { 
			...mapGetters(['loginForm','token']),
			authObj() {
				if(this.userType){
					const {jumpCarCount,inCarCount,evaluationCount,driveCarCount,destroyedCount} = this.loginForm;
					return {
						issue:{
							tips:'设置发行信息，获得更多曝光',
							historyList:[{
								count:driveCarCount,
								text:`已发车次`,
								type:"completeCar"
							},{
								count:destroyedCount,
								text:`已毁车次`,
								type:"cancelCar"
							},]
						},
						store:{
							tips:'设置门店信息，轻松提交意见',
							historyList:[{
								count:inCarCount,
								text:`已上车次`,
								type:"intoCar"
							},{
								count:jumpCarCount,
								text:`已跳车次`,
								type:"outOffCar"
							},{
								count:evaluationCount,
								text:`已评测`,
								type:"testCar"
							}]
						}
					}[this.userType]
				}
				return {}
			},
			storeName(){
				return {'issue':'发行','store':'门店'}[this.userType]
			},
			userType(){
				const form = this.$store.getters.loginForm;
				const userType = form&&form.userType;
				return userType || 'store'
			}
		},
		async onLoad(option) {
			await getDefaultUserExhibitInfoDto().then(res=>{
				this.form = res;
				const cityPath = this.form.cityPath
				if(cityPath) this.$set(this.form,'address',this.cityPathFormat(cityPath))
				this.pictureFlag = true
			})
			this.option = option;
			this.$store.dispatch('getClassify').then(res=>{
				const {children} = res.find(val=>val.label=='经营年数') || {}
				this.yearList = children.map(val=>{
					val.value = val.id;
					return val;
				}) || [];
				const year = this.yearList.find(val=>val.id===this.form.businessYear);
				year&&this.$set(this.form,'businessYear',year.label)
			})
			uni.$on('setStoreIds',res=>{
				this.form.storeIds = res;
			})
		},
		onUnload() {
			uni.$off('setStoreIds')
		},
		methods:{
			setInfo(){
				if(!this.uploadFlag) {
					this.$u.toast('门店图片上传中')
					return false;
				}
				const {nickname,gender,address,detailAddress,wxId,contactMan,contactNumber,storeNumber,businessYear,hotelAddress,hotelRoomNo} = this.form;
				//const wxreg = /^[(a-zA-Z)|_]{1}[-_a-zA-Z0-9]{5,19}$/
				if(!nickname){
					this.$u.toast('名称不能为空')
					return false;
				}
				if(this.userType!='issue' && !gender){
					this.$u.toast('性别不能为空')
					return false;
				}
				if(this.userType!='issue' &&!address){
					this.$u.toast('所在城市不能为空')
					return false;
				}
				if(this.userType!='issue' && !detailAddress){
					this.$u.toast('详细地址不能为空')
					return false;
				}
				
				if(!wxId){ //&&!wxreg.test(wxId)
					this.$u.toast('微信号码不能为空')
					return false;
				}

				// if(this.userType !=='issue' && !contactMan){
				// 	this.$u.toast('联系人不能为空')
				// 	return false;
				// }

				if(contactNumber&&!this.$u.test.mobile(contactNumber)){
					this.$u.toast('手机号码不正确')
					return false;
				}
				if(storeNumber&&!this.$u.test.digits(storeNumber)){
					this.$u.toast('门店数量不正确')
					return false;
				}
			
				if(!businessYear){
					this.$u.toast('请选择经营年数')
					return false;
				}

				if(this.userType=='issue' && !hotelAddress){
					this.$u.toast('展会酒店地址不能为空')
					return false;
				}
				if(this.userType=='issue' && !hotelRoomNo){
					this.$u.toast('房间号不能为空')
					return false;
				}
			
				
				
				this.loading = true;
				userExhibitInfoSetting({
					...this.form,
					businessYear: uni.getStorageSync('yearId'), // 提交的时候提交之前保存的本地年限id
					operationStep:2
				}).then(res=>{
					this.loading = false;
					this.$u.toast('修改成功')
					this.$store.dispatch('getInfo').then(({
						hxPassword,
						hxUsername
					}) => {
						getApp().globalData.close(); // 刷新环信账号
						// getApp().globalData.login({hxPassword,hxUsername})
					});;
					if(this.option.type="want"){
						setTimeout(()=>{
							this.$u.route({
								type:'back'
							})
						},1000)
					}
				}).catch(()=>{
					this.loading = false;
				})
			},
			goAddress(){
				this.$u.route({
					url:'/pagesB/address/address'
				})
			},
			//获取经营年数id
			getYearIds(item){
				this.$set(this.form,'yearId',item)
        uni.setStorageSync('yearId', item); // 跳转路由可能会导致组件之间传递的数据丢失,需将次id保存到本地
			},
			//选择酒店地址
			chooseAddress(){
				uni.chooseLocation({
					success: res => {
						this.$set(this.form,'hotelAddress',res.address)
					},
					fail: res =>  {
						if(res.errMsg==='chooseLocation:fail auth deny') this.$u.toast('您已拒绝授权，请打开设置允许')
					}
				})
			},
			//上传的图片
			getImgStr(str){
				this.form.picture = str;
			},
			//监听上传图片
			getUpload(flag){
				this.uploadFlag = flag;
			},
			goHistory(item){
				if(item.type=='testCar'){
					this.$u.route({
						url:'/pagesA/replyManager/replyManager',
						params:{
							...item,
							label:"我的评测",
							btnType:'showDelete',
							type:'myTestReply'
						}
					})
					return false;
				}
				this.$u.route({
					url:'/pagesA/historyCarList/historyCarList',
					params:item
				})
			},
			//门店录入
			pushStore(){
				this.$u.route({
					url:'/pagesA/selectStoreIds/selectStoreIds',
					params:{
						storeIds:this.form.storeIds
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.save-btn{
	padding: 100rpx 0;
}
.hotel-address{
	padding: 0px 10px;
	border:1px solid var(--line-color);
	text-align: left;
	overflow: hidden;
	white-space: nowrap;  
	height: 70rpx;
	line-height: 70rpx;
	box-sizing: border-box;
	border-radius: 8rpx;
}
</style>
